import React from 'react'
import {Select, Input, Button, Radio, Checkbox} from 'antd';
import styles from '../../css/categoryAdd.module.scss'
import {Table} from "react-bootstrap";

const Option = Select.Option;
const RadioGroup = Radio.Group;


export default class CategoryAdd extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            isShow: '1',
            categoryId:'',
            parents: []
        }
    }

    onChange = (e) => {
        // console.log('radio checked', e.target.value);
        console.log(e.target)
        this.setState({
            isShow: e.target.value,
        });
    }

    render() {
        return <div className={styles.container}>
            <div className={styles.handleBox}>
                <div>
                    父节点：&nbsp;&nbsp;&nbsp;<Select id='se' defaultValue="根节点" className={styles.selectBox}
                                              value={this.state.categoryId}    onChange={this.handleTxt}>
                    <Option key="0" value="0" >根节点</Option>
                    {this.state.parents.map(item => {
                        return <Option key={item.id} title={item.name} value={item.id} >{item.name}</Option>
                    })}

                </Select>
                </div>
                <div>
                    分类名称：<Input placeholder="请输入分类名称" value={this.state.name} onChange={this.handleText}
                                allowClear={true} className={styles.inputBox}/>
                </div>
                <div className={styles.radioBox}>
                    是否显示：&nbsp;&nbsp;<RadioGroup onChange={this.onChange} value={this.state.isShow}>
                    <Radio  value={'1'}>是</Radio>
                    <Radio value={'0'}>否</Radio>
                </RadioGroup>
                </div>
                <Button type="primary" onClick={this.sure} style={{marginLeft: "20px"}}>新增</Button>
                <Button type="primary" onClick={this.handleCanel} style={{marginLeft: "20px"}}>取消</Button>
            </div>
        </div>
    }


    handleText = (e) => {    //由于react是单向绑定。所以需要通过 onChange方法，手动设置。页面数据改变则逻辑数据改变
        this.setState({
            name:e.target.value
        }, function () {
            console.log(this.state.name)
        })

    }
    handleTxt = (value) => {    //组件善于看文档。有些方法有回调函数
        this.setState({
            categoryId : value
        })
    }


    //取消
    handleCanel = () => {
        this.props.history.go(-1);
    }
//    确定新增
    sure = () => {
        let self = this;
        fetch('/category', {
            method: 'POST',
            body: JSON.stringify({   //传参
                name: self.state.name,
                parentId: self.state.categoryId,
                isShow: self.state.isShow
            }),  //传递给后台的 ，所以这儿的对象与tableData不能混为一谈；请求体传递的是字符串
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())  //返回一个promise对象，可以解析成json对象
            .then(data => {
                alert('新增成功');
                self.setState({  //重置输入框
                    name: '',
                    isShow: '1'
                })
                this.props.history.push('./categoryTable')  //跳转到分类列表去
            })
    }

    componentWillMount() {
        this.getParent()
    }

    getParent = () => {
        let self = this;
        fetch('/category/all', {
            method: 'POST',
            body: JSON.stringify({
                parentId: 0
            }),
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())  //返回一个promise对象，可以解析成json对象
            .then(data => {
                self.setState({
                    parents: data.data,
                })
            })
    }
}





